Font Optimizations フォント最適化
Font フォント
の
WebPlatformApp Performance
読み込み
非同期読み込み
セルフホスティング
利用方法
display=swap
GoogleFontが利用可能になるまで代替フォントを表示
利用するテキストのみ
textパラメータ
&text=ABC123"
Best
code:index.html
// woffファイルなどの配信元に事前接続
<link rel="preconnect" href="
https://fonts.gstatic.com"
crossorigin>
// fontファイルをpreload
<link href="
https://fonts.googleapis.com/css2?family=Roboto:wght@500&text=abc123&display=swap"
rel="stylesheet">
// 印刷用CSSとしてブラウザに認識させてCSSを非同期ロード
<link rel="stylesheet" href="
https://fonts.googleapis.com/css2?family=Roboto:wght@500&text=abc123&display=swap"
media="print" onload="this.media='all'" />
参考
The Fastest Google Fonts – CSS Wizardry – Web Performance Optimisation
The Simplest Way to Load CSS Asynchronously | Filament Group, Inc.
参考
The Fastest Google Fonts – CSS Wizardry – Web Performance Optimisation
Webフォント読み込み戦略（2021年） - MOL
最適方法の説明あり